<template>
    <div>
        <el-row>
            <div class="contentDiv" v-for="(item,index) in chatList" :key="index" style="margin-top: 5px">
                <el-col :span="24" v-if="item.fromUid !== uid">
                    <span class="nickname">{{ item.fromNickname }}</span>
                    <div class="content">{{ item.content }}</div>
                </el-col>
                <el-col v-else :offset="12" :span="12" class="contentRightDiv">
                    <span class="nickname">{{ item.fromNickname }}</span>
                    <div class="contentRight">{{ item.content }}</div>
                </el-col>
            </div>
            <div style="position: fixed;bottom: 0;height: 10%;width: 90%">
                <el-input
                    type="text"
                    :rows="2"
                    placeholder=""
                    v-model="content"
                    style="width: 45%;position:fixed;bottom: 0"
                >
                </el-input>
                <el-button type="primary" @click="send" style="position: fixed;bottom: 0;right: 0">发送</el-button>
            </div>
        </el-row>
    </div>
</template>
<script>
export default {
    components: {},
    data() {
        return {
            chatList: [],
            ws: null,
            content: "",
            uid: parseInt(localStorage.getItem("uid")),

            websocketPath: "localhost:8080"
        }
    },
    props: {
        projectId: Number
    },
    methods: {
        initWebSocket() {
            this.ws = new WebSocket("ws://" + this.websocketPath + "/link/" + parseInt(localStorage.getItem("uid")));
            this.ws.onerror = function (event) {
                console.error("websocket错误")
                console.error(event)
            }
            this.ws.onclose = function (event) {
                console.log("off line");
                console.log(event)
            }
            this.ws.onmessage = this.onMessage;
            window.onbeforeunload = this.ws.onclose
            console.log(this.ws)
        },
        getHistory(projectId, index, limit) {
            console.log(projectId)
            this.$axios({
                url: "/api/IM/get",
                method: "get",
                headers: {
                    token: localStorage.getItem("token")
                },
                params: {
                    projectId: projectId,
                    index: index,
                    limit: limit
                }
            }).then((res) => {
                console.log(res)
                if (res.data.success) {
                    this.chatList = res.data.result;
                }
            })
        },
        onMessage(msg) {
            console.log(msg);
            this.chatList.push(JSON.parse(msg.data));
            this.content = "";
        },
        send() {
            if (this.content.length === 0) {
                return;
            }
            this.$axios({
                url: "/api/IM/group/send",
                method: "post",
                headers: {
                    token: localStorage.getItem("token")
                },
                data: {
                    projectId: this.projectId,
                    fromUid: localStorage.getItem("uid"),
                    content: this.content,
                    time: new Date(),
                    fromNickname: localStorage.getItem("nickname")
                }
            }).then((res) => {
                if (res.data.success) {
                    this.chatList.push(res.data.result);
                }
            })
        }
    },
    watch: {
        projectId(newVal) {
            this.getHistory(newVal, 0, 20)
        }
    },
    mounted() {
        this.getHistory(this.projectId)
    },
    created() {
        this.initWebSocket();
    }
}
</script>
<style>
.contentDiv {
    height: 90%;
    margin-bottom: 14%;
    margin-left: 2px;
}

.nickname {
    font-size: 17px
}

.content {
    width: 48%;
    border: 1px solid black;
    font-size: 20px
}
.contentRightDiv{
    text-align: right;
}
.contentRight{
    border: 1px solid black;
    font-size: 20px
}
</style>